<template>
  <div class="app-container home">
    <el-row type="flex" justify="space-around" class="row-bg">
      <el-card class="box-card cardDiv1">
        <el-col :span="5">
          <div class="box-div card1">
            <div class="webBox">
              <div class="webO">收取金额:</div>
              <div class="webT">{{ objInfo.sqjeSum }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box-div card2">
            <div class="webBox">
              <div class="webO">退还金额:</div>
              <div class="webT">{{ objInfo.thjeSum }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box-div card3">
            <div class="webBox">
              <div class="webO">没收金额:</div>
              <div class="webT">{{ objInfo.msjeSum }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box-div card4">
            <div class="webBox">
              <div class="webO">账户余额:</div>
              <div class="webT">{{ objInfo.zhjeSum }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="box-div card5">
            <div class="webBox">
              <div class="webO">执行数量:</div>
              <div class="webT">{{ objInfo.zxslSum }}</div>
            </div>
          </div>
        </el-col>
      </el-card>
    </el-row>
    <el-row
      type="flex"
      justify="space-around"
      class="row-bg"
     
      :gutter="10"
    >
      <el-col :span="8">
        <el-card class="box-card center-content">
          <div slot="header" class="clearfix">
            <span>保证金信息</span>
            <el-badge :value="99" class="item" style="visibility: hidden">
              <el-button type="text" size="small">待处理订单</el-button>
            </el-badge>
            <el-button style="float: right; padding: 3px 0" type="text"
              >更多</el-button
            >
          </div>
          <el-table :data="tableList" height="230" style="width: 100%">
            <el-table-column prop="badw" label="办案单位"> </el-table-column>
            <el-table-column prop="sqjeSum" label="收取金额"> </el-table-column>
            <el-table-column prop="thjeSum" label="退还金额"> </el-table-column>
            <el-table-column prop="msjeSum" label="没收金额">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card center-content" style="height: 320px">
          <div id="main2" style="height: 270px; width: 400px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card center-content" style="height: 320px">
          <div id="main3" style="height: 270px; width: 400px"></div>
        </el-card>
      </el-col>
    </el-row>
    <!--    <el-divider />-->
    <el-row type="flex" justify="space-around" class="row-bg">
      <el-col :span="14" style="margin-right: 10px">
        <el-card class="box-card cardDiv2" >
          <div slot="header" class="clearfix">
            <span>七日内收取金额</span>
          </div>
          <div id="main1" style="height: 300px; width: 100%"></div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card class="box-card cardDiv2">
          <div slot="header" class="clearfix">
            <span>七日内没收、退回金额</span>
            <el-badge :value="99" class="item" style="visibility: hidden">
              <el-button type="text" size="small">待处理订单</el-button>
            </el-badge>
            <el-button style="float: right; padding: 3px 0" type="text"
              >更多</el-button
            >
          </div>
          <div id="main4" style="height: 300px; width: 100%"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
import {
  getAmount,
  getAmountGroupByOrg,
  getMsBing,
  getJrje,
  getThBing,
  getSevenDayJe
} from "@/api/system/bzjtable";
import * as echarts from "echarts";
export default {
  name: "Index",
  data() {
    return {
      objInfo: {},
      // 版本号
      version: "3.8.6",
      tableList: [],
      // tableData: [
      //   {
      //     money: "8856.56",
      //     name: "张三",
      //     phone: "18888888888",
      //     level: "1",
      //   },
      //   {
      //     money: "2384.50",
      //     name: "李四",
      //     phone: "18888888888",
      //     level: "2",
      //   },
      //   {
      //     money: "6000.20",
      //     name: "王五",
      //     phone: "13688888888",
      //     level: "3",
      //   },
      //   {
      //     money: "5558.34",
      //     name: "赵六",
      //     phone: "13688888888",
      //     level: "4",
      //   },
      //   {
      //     money: "1234.25",
      //     name: "钱七",
      //     phone: "13688888888",
      //     level: "3",
      //   },
      //   {
      //     money: "1234.25",
      //     name: "钱七",
      //     phone: "13688888888",
      //     level: "3",
      //   },
      //   {
      //     money: "1234.25",
      //     name: "钱七",
      //     phone: "13688888888",
      //     level: "2",
      //   },
      // ],
      // tableData2: [
      //   {
      //     date: "2016-05-02",
      //     name: "张三",
      //     code: "454545454234455",
      //     money: "2422",
      //     status: "1",
      //   },
      //   {
      //     date: "2016-05-02",
      //     name: "李四",
      //     code: "234234234324234",
      //     money: "7870.00",
      //     status: "1",
      //   },
      //   {
      //     date: "2016-05-02",
      //     name: "王五",
      //     code: "23523523544644",
      //     money: "34545.2",
      //     status: "1",
      //   },
      //   {
      //     date: "2016-05-02",
      //     name: "赵六",
      //     code: "25235235235325",
      //     money: "3430",
      //     status: "2",
      //   },
      //   {
      //     date: "2016-05-02",
      //     name: "钱七",
      //     code: "25235235235325",
      //     money: "3430",
      //     status: "3",
      //   },
      // ],
      lineXList: [],
      lineYList: [],
      barXList:[],
      barYList1:[],
      barYList2:[]
    };
  },
  created() {},
  mounted() {
    this.setbData();
    this.setBireData();
    getAmount({}).then((res) => {
      this.objInfo = res;
    });
    getAmountGroupByOrg({}).then((res) => {
      this.tableList = res.rows;
    });
    getSevenDayJe({}).then((res) => {
      this.lineXList = res.data.map((e) => e.rq)
      this.barXList = res.data.map((e) => e.rq)
      this.lineyList = res.data.map((e) => e.sjjeSum)
      this.barYList1 = res.data.map((e) => e.msjeSum)
      this.barYList2 = res.data.map((e) => e.thjeSum)
      this.setLineData();
      this.handleSetLine();
    })
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    setLineData() {
        var chartDom = document.getElementById("main1");
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          xAxis: {
            type: "category",
            data: this.lineXList,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data:this.lineyList,
              type: "line",
              symbolSize: 15,
           
            },
          ],
        };

        option && myChart.setOption(option);
      // });
    },
    setbData() {
      getThBing({}).then((res) => {
        let chartData = res.data;
        var chartDom = document.getElementById("main2");
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          color: ["#b78feb", "#e9898f"],
          title: {
            text: "退回占比（%）",
            left: "left",
            textStyle: {
              fontSize: 15,
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            bottom: 1,
            left: "center",
            // data: ['没收占比', '退回占比','未处理占比']
            data: ["其他占比", "退回占比"],
          },
          series: [
            {
              type: "pie",
              radius: "65%",
              center: ["50%", "45%"],
              selectedMode: "single",
              data: chartData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };

        option && myChart.setOption(option);
      });
    },
    setBireData() {
      getJrje({}).then((res) => {
        let yList = []
        let xList = []
        for (let k in res.data) {
          console.log("k", k);
          yList.push(k)
          xList.push(res.data[k])
        }
        var chartDom = document.getElementById("main3");
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: "今日状态",
            textStyle: {
              fontSize: 15,
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {},
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true, //设置自适应画布大小状态为开，也可通过设置left左移实现相同效果
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
            splitLine: {
              show: false,
            },
            axisLine: {
              //x轴坐标轴
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              //x轴刻度线
              show: false,
            },
          },
          yAxis: {
            type: "category", //纵向改成横向柱状图
            data: yList, //y轴显示文字
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          series: [
            {
              name: "",
              type: "bar",
              barWidth: 20,
              showSymbol: false,
              label: {
                //柱状图显示数值
                show: true,
                position: "insideTop", //内部顶部显示
                textStyle: {
                  color: "#FFF", //字体颜色
                  fontSize: 14, //字体大小
                },
              },
              data: [
                {
                  value: xList[0],
                  itemStyle: {
                    normal: {
                      barBorderRadius: [0, 6, 6, 0],
                      color: new echarts.graphic.LinearGradient(
                        1,
                        0,
                        0,
                        0,
                        [
                          {
                            //1000纵向柱状图渐变色 0100横向柱状图渐变色
                            offset: 0,
                            color: "rgba(30, 198, 149, 1)", // 0% 处的颜色
                          },
                          {
                            offset: 0.6,
                            color: "rgba(30, 198, 149, 1)", // 60% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "rgba(51, 204, 204, 1)", // 100% 处的颜色
                          },
                        ],
                        false
                      ),
                    },
                  },
                },
                {
                  value: xList[1],
                  itemStyle: {
                    normal: {
                      barBorderRadius: [0, 6, 6, 0],
                      color: new echarts.graphic.LinearGradient(
                        1,
                        0,
                        0,
                        0,
                        [
                          {
                            offset: 0,
                            color: "rgba(226, 113, 140, 1)", // 0% 处的颜色
                          },
                          {
                            offset: 0.6,
                            color: "rgba(244, 174, 149, 1)", // 60% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "rgba(244, 174, 149, 1)", // 100% 处的颜色
                          },
                        ],
                        false
                      ),
                    },
                  },
                },
                {
                  value: xList[2],
                  itemStyle: {
                    normal: {
                      barBorderRadius: [0, 6, 6, 0],
                      color: new echarts.graphic.LinearGradient(
                        1,
                        0,
                        0,
                        0,
                        [
                          {
                            offset: 0,
                            color: "rgba(255, 153, 51, 1)", // 0% 处的颜色
                          },
                          {
                            offset: 0.6,
                            color: "rgba(255, 153, 51, 1)", // 60% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "rgba(239, 203, 45, 1)", // 100% 处的颜色
                          },
                        ],
                        false
                      ),
                    },
                  },
                },
              ],
            },
          ],
        };

        option && myChart.setOption(option);
      })
    },
    handleSetLine() {
      // let chartData = res.data
      var chartDom = document.getElementById("main4");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: this.barXList,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.barYList1,
            type: "bar",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  //1000纵向柱状图渐变色 0100横向柱状图渐变色
                  offset: 0,
                  color: "rgba(30, 198, 149, 1)", // 0% 处的颜色
                },
                {
                  offset: 0.6,
                  color: "rgba(30, 198, 149, 1)", // 60% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(51, 204, 204, 1)", // 100% 处的颜色
                },
              ]),
            },
          },
          {
            data: this.barYList2,
            type: "bar",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#eea91b" },
                { offset: 0.5, color: "#ff4949" },
              ]),
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>
 
<style scoped lang="scss">
::v-deep .el-card__body {
  padding: 15px 20px 20px 20px;
  display: flex;
  justify-content: center;
}
.box-div {
  height: 120px;
  padding: 35px;
  margin: 20px;
}
.cardDiv1 {
  width: 100%;
  margin-bottom: 10px;
}
.cardDiv2 {
  width: 100%;
  margin-bottom: 10px;
  height: 350px;
}
.center-content {
  width: 100%;
  margin-bottom: 10px;
}
.app-container {
  padding: 20px;
  background: #eeeeee50;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  .webBox {
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .webO {
    display: -webkit-box;
    -webkit-box-pack: start;
    -webkit-box-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
  }
  .webT {
    display: -webkit-box;
    -webkit-box-pack: end;
    -webkit-box-align: center;
    font-size: 20px;
    font-weight: 700;
    padding-right: 50px;
    padding-top: 10px;
    color: #fff;
  }
  .card1 {
    background: linear-gradient(
      180deg,
      rgba(30, 198, 149, 1) 0%,
      rgba(30, 198, 149, 1) 0%,
      rgba(51, 204, 204, 1) 100%,
      rgba(51, 204, 204, 1) 100%
    );
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: "Arial Negreta", "Arial Normal", "Arial";
  }
  .card2 {
    background: linear-gradient(
      90deg,
      rgba(244, 174, 149, 1) 0%,
      rgba(244, 174, 149, 1) 0%,
      rgba(226, 113, 140, 1) 100%,
      rgba(226, 113, 140, 1) 100%
    );
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: "Arial Negreta", "Arial Normal", "Arial";
  }
  .card3 {
    background: linear-gradient(
      180deg,
      rgba(255, 153, 51, 1) 0%,
      rgba(255, 153, 51, 1) 0%,
      rgba(239, 203, 45, 1) 100%,
      rgba(239, 203, 45, 1) 100%
    );
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: "Arial Negreta", "Arial Normal", "Arial";
  }
  .card4 {
    background: linear-gradient(
      180deg,
      rgba(45, 169, 250, 1) 0%,
      rgba(45, 169, 250, 1) 0%,
      rgba(102, 204, 255, 1) 100%,
      rgba(102, 204, 255, 1) 100%
    );
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: "Arial Negreta", "Arial Normal", "Arial";
  }
  .card5 {
    background: linear-gradient(
      180deg,
      rgba(170, 137, 254, 1) 0%,
      rgba(170, 137, 254, 1) 0%,
      rgba(204, 153, 204, 1) 100%,
      rgba(204, 153, 204, 1) 100%
    );
    border: none;
    border-radius: 4px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
    font-family: "Arial Negreta", "Arial Normal", "Arial";
  }
}
</style>
 